/* pages/friends/index.wxss */
.pageContent {
  padding-top: var(--nav-bar-height); /* 使用自定义变量 */
}
.friends {
  padding: 24.5vw 0 40rpx;
  background-color: #f6f6f6;

  .picInfoBox {
    position: relative;
    .onlineStatusBox {
      position: absolute;
      top: 0;
      right: 99rpx;
      width: 22rpx;
      height: 22rpx;
      background: #0ac061;
      border-radius: 50%;
    }
    .awayStatusDotBox {
      position: absolute;
      top: 0;
      right: 99rpx;
      width: 22rpx;
      height: 22rpx;
      background: #ffc301;
      border-radius: 50%;
    }
    .offlineDotBox {
      position: absolute;
      top: 0;
      right: 99rpx;
      width: 22rpx;
      height: 22rpx;
      background: #4b4c4c;
      border-radius: 50%;
    }
  }
  .friend-requests {
    padding: 30rpx 40rpx;
    background: #FFF0E6;
    display: flex;
    justify-content: space-between;

    .requests-num::before {
      display: inline-block;
      content: '';
      width: 20rpx;
      height: 20rpx;
      background: #FF7828;
      border-radius: 50%;
      margin-right: 20rpx;
    }
  }

  .recent-contacts {
    padding: 20rpx 0;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);

    .title-m32,
    .see-more-Mfont {
      padding: 0 40rpx;
    }

    .recent-items {
      display: flex;
      column-gap: 20rpx;
      padding: 20rpx 0 20rpx 40rpx;
      overflow: auto;

      .recent-item:last-child {
        padding-right: 40rpx;
      }
    }
  }

  .msg-list {
    padding: 20rpx 0 100rpx 0;
    box-sizing: border-box;
    .title-h2 {
      padding: 0 40rpx;
    }
  }
}
.friend-avatarView{
  position: relative;
  .online-s{
    position: absolute;
    right: 15px;
    top: 5px;
    width: 10px;
    height: 10px;
    background: #07C160;
    border-radius: 50%;
  }
  .away-s{
    position: absolute;
    right: 15px;
    top: 5px;
    width: 10px;
    height: 10px;
    background: #FFC300FF;
    border-radius: 50%;
  }
}
.friend-name{
  max-width: 142rpx;
  overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.not-loginIn {
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 40rpx;

  image {
    width: 300rpx;
    height: 300rpx;
  }

  .primary-btn {
    width: 100%;
  }
}

.findFriendPopupBox {
  width: 100%;
  padding: 20rpx 30rpx 60rpx;
  box-sizing: border-box;
  text-align: center;
  .lineTopBox {
    width: 100%;
    height: auto;
    view {
      width: 22%;
      height: 5px;
      border-radius: 3px;
      background-color: #313131;
      margin: 0 auto;
    }
  }
  .findPopopTitle {
    width: 100%;
    height: auto;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #313131;
    line-height: 48rpx;
    margin: 50rpx 0 20rpx 0;
  }

  .findPopopTip {
    width: 100%;
    height: auto;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #313131;
    line-height: 44rpx;
    margin: 26rpx 0;
  }

  .do-items {
    width: 100%;
    margin-top: 2%;

    .orangeBorder {
      border: 1px solid #FF7828 !important;
    }

    .grayBorder {
      border: 2rpx solid rgba(0, 0, 0, 0.1) !important;
    }

    .do-item {
      width: 86%;
      margin-left: 2%;
      margin-bottom: 20rpx;
      padding: 24rpx 30rpx;
      border-radius: 20rpx;
      border: 2rpx solid rgba(0, 0, 0, 0.1);
      font-family: PingFang SC-Medium;
      font-weight: 500;
      font-size: 28rpx;
      color: #313131;
      line-height: 44rpx;
      display: flex;
      align-items: center;
      column-gap: 20rpx;

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }

}